Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fabric] Use the layout metrics to get the scale factor in component views. #1816

Merged

Conversation

lenaic
Copy link

@lenaic lenaic commented May 5, 2023

Please select one of the following

  • I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
  • I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
  • I am making a fix / change for the macOS implementation of react-native
  • I am making a change required for Microsoft usage of react-native

Summary

Fabric does not provide guarantees for the order of creation of host views, which means a view could be created before being added to a window. This causes issues when reading the backingScaleFactor within a view because it returns a nil window and the returned value is 0.

This caused border rendering issues in the <View /> component since the border was generated before the view hierarchy was added to a window.

The layout metrics of the shadow node provides the current scale factor through the pointScaleFactor property. This is set when initializing the layout context, which guarantees that the value will be available when a view is being created and inserted.

Changelog

[macOS] [FIXED] - Use the layout metrics scale factor in view components to fix scale dependent rendering

Test Plan

Tested by running RNTester on macOS with fabric (RCT_NEW_ARCH_ENABLED=1) and launching the API Border example.

Without the fix:
Screenshot 2023-05-05 at 13 03 38

With the fix:
Screenshot 2023-05-05 at 13 02 10

@lenaic lenaic requested a review from a team as a code owner May 5, 2023 11:29
@Saadnajmi Saadnajmi merged commit 7da548a into microsoft:main May 5, 2023
@lenaic lenaic deleted the fabric/use-layout-metrics-scale-factor branch May 6, 2023 13:38
lenaic added a commit to lenaic/react-native-macos that referenced this pull request Aug 7, 2023
…views. (microsoft#1816)

* Use the layout metrics to get the scale factor in component views.

* Use layout metrics pointScaleFactor instead of RCTScreenScale on iOS.

---------

Co-authored-by: Nick <[email protected]>
Saadnajmi pushed a commit that referenced this pull request Aug 7, 2023
* [Fabric] Return active touch identifiers in surface touch handler on mouse up. (#1815)

Co-authored-by: Nick <[email protected]>

* [Fabric] Add mandatory color space conversion for macOS. (#1813)

Co-authored-by: Nick <[email protected]>

* [Fabric] Clean up hit testing now that RCTUIView extends RCTPlatformView (#1814)

* Clean up surface touch handler now that RCTUIView extends RCTPlatformView.

* Fix the iOS build.

---------

Co-authored-by: Nick <[email protected]>

* [Fabric] Use the layout metrics to get the scale factor in component views. (#1816)

* Use the layout metrics to get the scale factor in component views.

* Use layout metrics pointScaleFactor instead of RCTScreenScale on iOS.

---------

Co-authored-by: Nick <[email protected]>

* Fix RNTester content not resizing with window. (#1818)

Co-authored-by: Nick <[email protected]>

* Fix wrong text offset when a line height is set. (#1819)

Co-authored-by: Nick <[email protected]>

* [Fabric] Fix scroll views hiding content underneath them in Fabric. (#1820)

* Fix scroll views hiding content underneath them in Fabric.

* Clean up Paper scroll view after shim scroll view fix.

---------

Co-authored-by: Nick <[email protected]>

* [Fabric] Add support for image content mode and tint features (#1828)

* Add RCTUIImageView to RCTUIKit to support iOS features on macOS.

* Add support for tint and resize mode to Image on Fabric.

* Clean up logging and add macOS tag.

* Fix code style to match the style guide.

---------

Co-authored-by: Nick <[email protected]>

* [Fabric] Fix text input rendering crashing by using layout metrics pixelScaleFactor (#1817)

* Use layout metrics to assign the active scale factor to RCTUITextField.

* Use layout metrics to assign the active scale factor to RCTUITextView.

---------

Co-authored-by: Nick <[email protected]>

* [Fabric] Tint images using CIFilter fixing wrong tinted image size (#1843)

* Tint images using CIFilter to fix wrong image size when enabling tinting.

* Initialize the CIFilter input values with default values.

---------

Co-authored-by: Nick <[email protected]>

---------

Co-authored-by: Nick <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants